<template>
  <div
    class="lx-index__page"
    :style="{ backgroundImage: `url(${webInfo.holeBg})` }"
  >
    <vue-danmaku
      v-model:danmus="danmus"
      useSlot
      loop
      style="height: 100%; width: 100%"
    >
      <template #dm="{ danmu }">
        <div class="danmu-item flex">
          <img :src="danmu.avatar" alt="" class="avatar-box" />
          <span class="danmu-msg"> {{ danmu.message }}</span>
        </div>
      </template>
    </vue-danmaku>
    <div class="option-panel flex flex--b">
      <h1 class="title-box">心语</h1>
      <div class="flex">
        <input
          type="text"
          class="input-box"
          placeholder="留下点什么~"
          v-model.trim="message"
          @focus="showBtn = true"
          @keydown.enter="addTreeHole"
        />
        <button v-if="showBtn" class="input-btn" @click="addTreeHole">
          发射
        </button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, unref } from "vue";
import VueDanmaku from "vue3-danmaku";
import { queryTreeHole, saveTreeHole } from "@/api/whisper.api";
import { WhisperList, WhisperDto } from "@/types/whisper";
import { getUserCache } from "@/utils/storage";

import { useWebInfoStore } from "@/store/webInfo.store";
import { storeToRefs } from "pinia";

const store = useWebInfoStore();
const { getWebInfo } = store;
const { webInfo } = storeToRefs(store);
const danmus = ref<WhisperList>([]);
const message = ref<string>("");
const showBtn = ref(false);
/**
 * 获取弹幕
 */
const getTreeHole = async () => {
  const res = await queryTreeHole();
  if (res.code === 200) {
    danmus.value = res.data || [];
  }
};
/**
 * 发射弹幕
 */
const addTreeHole = async () => {
  const userInfo = getUserCache();
  const defaultAvatar =
    "http://img.xjlyh.site/2023/09/08/c69e3faec5304153bbb1b33d8f029f50.jpeg";
  const avatar = userInfo && userInfo.avatar ? userInfo.avatar : defaultAvatar;
  const params: WhisperDto = {
    message: unref(message),
    avatar,
  };
  const res = await saveTreeHole(params);
  message.value = "";
  if (res.code === 200) {
    danmus.value.unshift(params);
  }
};
onMounted(() => {
  getTreeHole();
  if (!webInfo.value.holeBg) {
    getWebInfo();
  }
});
</script>
<style lang="scss" scoped>
.lx-index__page {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  position: relative;
  z-index: 0;
  padding: 10px 0;
  .option-panel {
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 10;
    padding: 5px;
    flex-direction: column;
    .title-box {
      color: #fff;
    }
    .input-box,
    .input-btn {
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      border-radius: 50px;
      background-color: transparent;
      color: #fff;
      border: 2px solid #fff;
    }
    .input-box {
      margin-right: 10px;
      &::placeholder {
        color: #fff;
      }
      &:focus-visible {
        outline: none;
      }
    }
    .input-btn {
      width: 80px;
      text-align: center;
    }
  }
  .danmu-item {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 100px;
    color: #fff;
    padding: 5px 10px 5px 5px;
    .avatar-box {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
    .danmu-msg {
      line-height: 30px;
      padding-left: 8px;
      white-space: nowrap;
      font-size: 16px;
    }
  }
}
</style>
